<template>
    <div class="productList">
        <!-- 查询条件 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="商品条码">
                <el-input v-model="formInline.barCode" placeholder="商品条码"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="formInline.title" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品状态">
                <el-select v-model="formInline.shelfState" placeholder="全部">
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="下架" value="1"></el-option>
                </el-select>
            </el-form-item>

            <br>

            <el-form-item label="商品分类">
                <el-cascader
                        v-model="categoryId"
                        size="mini"
                        :options="options"
                        :props="props"
                        @change="categoryChange"
                        filterable
                        change-on-select
                ></el-cascader>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getCategory()">查询</el-button>
                <el-button type="warning" plain @click="resetForm()">重置</el-button>
                <router-link to="/product_introduction" class="btn-router" style="margin-left:10px;">
                    <el-button type="success">导入新品</el-button>
                </router-link>
            </el-form-item>
        </el-form>

        <!--列表-->
        <el-table :data="dataSource" stripe highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column prop="barCode" label="商品条码" width="170" align ="center"></el-table-column>
            <el-table-column prop="title" label="商品名称" width="220" align ="center"></el-table-column>
            <el-table-column prop="spec" label="商品规格" align ="center"></el-table-column>
            <el-table-column prop="unit" label="库存单位" align ="center"></el-table-column>
            <el-table-column prop="perCarton" label="箱规" align ="center"></el-table-column>
            <el-table-column prop="category1" label="一级分类" align ="center"></el-table-column>
            <el-table-column prop="category2" label="二级分类" align ="center"></el-table-column>
            <el-table-column label="批发价（元）" align ="center">
                <template slot-scope="scope">{{ scope.row.price / 100 }}</template>
            </el-table-column>
            <el-table-column prop="stock" label="可用库存"></el-table-column>
            <el-table-column label="商品状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.shelfState === 0" style="color: #67c23a;">{{ formatState(scope.row.shelfState) }}</span>
                    <span v-else-if="scope.row.shelfState === 1" style="color: #909399">{{ formatState(scope.row.shelfState) }}</span>
                    <span v-else>{{ formatState(scope.row.shelfState) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100" type="index">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" plain @click="handlePath(scope)">修改</el-button>
                    <!--<router-link :to="{ path:'revise_product', query: {scope:scope.row} }" class="btn-router">
                        <el-button type="success" size="mini" plain>修改</el-button>
                        &lt;!&ndash;<el-button v-if="scope.row.shelfState == 0" type="success" size="mini" plain>修改</el-button>&ndash;&gt;
                    </router-link>-->
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    background
                    layout="prev, pager, next" :page-size="page_size"
                    :total="total"
                    @current-change="handleCurrentChange"
                    style="float:right;">
            </el-pagination>
        </el-col>
    </div>
</template>
<script>
  import util from '../../../common/js/util'
  import * as api from '../../../api/enjoylove_api'

  export default {
    data() {
      return {
        listLoading: false,
        page: 1,
        total: 0,
        page_size: 10,

        formInline: {
          barCode: '',  //商品条码
          title: '',    //商品名称
          shelfState: '',    //商品状态
          category: ''      //分类ID
        },
        options: [],
        props: {
          value: 'code',
          label: 'title',
          children:'children'
        },
        categoryId: [],
        dataSource: [],
      }
    },
    methods: {
      //状态显示转换
      formatState (row) {
        return row == 0 ? '正常' : row == 1 ? '下架' : '未知';
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getCategory();
      },
      //获取商品列表信息
      getCategory () {
        let para = {
          page: this.page,
          category: '' || this.formInline.category,
          title: '' || this.formInline.title,
          barCode: '' || this.formInline.barCode,
          shelfState: '' || this.formInline.shelfState
        };
         this.listLoading = true;

        api.getProductList(para).then((res) => {

          let datas = JSON.parse(res.data);
          console.log(datas)
          if(!datas.status){
            if(datas.success){
              //成功
               this.total = datas.data.products.totalElements;
               this.dataSource = datas.data.products.content;
              this.listLoading = false;
            }else {
              this.$message.error(datas.message);
            }
          }else{
            if(datas.status == 401){
              this.$router.push('/login');
            }
            this.$message(res.data.msg);
          }

        });
      },

      //重置商品列表信息
      resetForm() {
        this.formInline = {
          page: this.page,
          category: '',
          title: '',
          barCode: '',
          shelfState: ''
        }
        this.categoryId = []
        this.getCategory ()
      },

      //获取分类列表
      getCategoryList () {
        let para = {};
        api.getCategoryList(para).then((res) => {
          console.log(JSON.parse(res.data))
          if(res.status == 200){
            let datas = JSON.parse(res.data);
            this.options = datas.data.categories
          }else{
            if(res.status == 401){
              this.$router.push('/login');
            }
            this.$message(res.data.msg);
          }
        });
      },

      //分类改变时
      categoryChange () {
        console.log(this.categoryId)
        if(this.categoryId.length == 1){
          this.formInline.category = this.categoryId[0]
        }else {
          this.formInline.category = this.categoryId[1]
        }
      },

      //修改商品按钮
      handlePath (row) {
        util.cookieMethod.setCookie("productRowId",row.row.id)
        this.$router.push('/revise_product')
      }

    },
    mounted() {
      this.$nextTick(() => {
        this.getCategory()
        this.getCategoryList()
      })
    }
  }
</script>
